<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>展示所有用户页面</title>
        <script type="text/javascript" src="/User-web/js/axios-0.21.0.js"></script>
        <script type="text/javascript" src="/User-web/js/vue-2.6.12.js"></script>
        <script type="text/javascript" src="/User-web/js/vue-router-3.4.9.js"></script>
        <script type="text/javascript" src="/User-web/js/qs-6.9.4.js"></script>
    </head>
    <body>
        <div id="app">
            <table align="center">
                <tr>
                    <td>
                        <router-link to="/user/show"><button>查询</button></router-link>
                        <router-link to="/user/addUser"><button>添加</button></router-link>
                        <hr>
                        <router-view></router-view>
                    </td>
                </tr>
            </table>
        </div>

        <template id="user-table">
            <div align="center">
                <form action="" @submit.prevent="show(1)">
                    <input type="text" v-model="query">
                    <input type="submit" value="搜索">
                </form>
            <table border="1" align="center">
                <thead>
                <tr>
                    <th>账号</th>
                    <th>名称</th>
                    <th>邮箱</th>
                    <th>密码</th>
                    <th>手机号码</th>
                    <th>权限</th>
                    <th>状态</th>
                    <th>创建日期</th>
                    <th>修改日期</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="u in users" :key="u.userId">
                    <td>{{u.userId}}</td>
                    <td>{{u.username}}</td>
                    <td>{{u.email}}</td>
                    <td>{{u.password}}</td>
                    <td>{{u.mobile}}</td>
                    <td>{{u.role}}</td>
                    <td>{{u.status}}</td>
                    <td>{{u.createTime}}</td>
                    <td>{{u.updateTime}}</td>
                    <td>
                        <button @click="deleteUser(u.userId)">删除</button>
                        <!-- 动态生成地址并拼接上查询参数-->
                        <router-link :to="{path:'/user/updateUser',query:{id:u.userId}}"><button>更新</button></router-link>
                    </td>
                </tr>
                </tbody>
            </table>
            <table align="center">
                <tr>
                    <td>
                        <p>
                            <a href="" v-for="page in pages" :key="page" @click.prevent="show(page)">
                                <button style="margin: 0 0px">
                                    {{page}}
                                </button>
                            </a>
                        </p>
                    </td>
                </tr>
            </table>
            </div>
        </template>
        <!--添加用户界面-->
        <template id="add-form">
            <form action="" @submit.prevent="add">
                名称: <input type="text" v-model="user.username"> <br>
                邮箱： <input type="text" v-model="user.email"> <br>
                密码: <input type="text" v-model="user.password"> <br>
                手机号码: <input type="text" v-model="user.mobile"> <br>
                权限: <input type="text" v-model="user.role"> <br>
                状态: <input type="text" v-model="user.status"> <br>
                创建日期: <input type="text" v-model="user.createTime"> <br>
                修改日期: <input type="text" v-model="user.updateTime"> <br>
                <input type="submit" value="添加">
            </form>
        </template>
        <template id="update-form">
            <form action="" @submit.prevent="update">
                <input type="hidden" v-model="user.userId">
                名称: <input type="text" v-model="user.username"> <br>
                邮箱： <input type="text" v-model="user.email"> <br>
                密码: <input type="text" v-model="user.password"> <br>
                手机号码: <input type="text" v-model="user.mobile"> <br>
                权限: <input type="text" v-model="user.role"> <br>
                状态: <input type="text" v-model="user.status"> <br>
                创建日期: <input type="text" v-model="user.createTime"> <br>
                修改日期: <input type="text" v-model="user.updateTime"> <br>
                <input type="submit" value="更新">
            </form>
        </template>
        <script>
            //修改用户信息
            const updateForm = {
                template:"#update-form",
                data(){
                    return{
                        user:{}
                    }
                },
                created() {
                    axios.get("/User-web/users/"+this.$route.query.id)
                        .then(resp=>{
                        console.log(resp);
                        this.user = resp.data.user;
                    }).catch((error)=>{//处理异常
                        console.log(error);
                    })
                },
                methods:{
                    update(){
                        axios.put("/User-web/users/", this.user)
                        .then(resp=>{
                            console.log("进入update方法中")
                            console.log(resp);
                            if(resp.data.status == "success"){
                                alert("更新成功");
                                this.$router.push("/user/show");
                            }else{
                                alert("更新失败");
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    }
                }
            }
            //添加用户
            const addForm = {
                template: "#add-form",
                data(){
                    return{
                        user:{}
                    }
                },
                methods: {
                    add(){
                        axios.post("/User-web/users/",this.user)
                        .then(resp=>{
                            console.log(resp);
                            if(resp.data.status == "success"){
                                console.log("进入方法中");
                                alert("添加成功");
                                this.$router.push("/user/show");
                            }else{
                                alert("添加失败");
                            }
                        }).catch((error)=>{//处理异常
                            console.log(error);
                        })
                    }
                }
            }
            const userTable = {
                template:"#user-table",
                data(){
                    return{
                        users:[],
                        pages:[],
                        query: ""
                    }
                },
                created() {
                    this.show(1);
                },
                methods:{
                    //展示所有
                    show(i){
                        console.log("进入展示方法中");
                        axios.get("/User-web/users?pageNum="+i+"&pageSize=3&query="+this.query).then(resp=>{
                            let data = resp.data;
                            console.log(data);
                            this.users = data.users;
                            this.pages = data.pages;
                        }).catch((error)=>{//处理异常
                            console.log(error);
                        })
                    },
                    //删除用户信息
                    deleteUser: function (id) {
                        let isDelete = confirm("确定删除吗？");
                        if(!isDelete){
                            return;
                        }
                        axios.delete("/User-web/users/"+id)
                            .then(resp=>{
                            if (resp.data.status == "success"){
                                alert("删除成功");
                                this.show(1);
                            }else{
                                alert("删除失败");
                            }
                        }).catch((error)=>{//处理异常
                            console.log(error);
                        })
                    }
                }
            }
            //定义路由规则
            const router = new VueRouter({
                routes:[
                    {path:"/", redirect:"/user/show"},
                    {path:"/user/show", component:userTable},
                    {path:"/user/addUser", component: addForm},
                    {path:"/user/updateUser", component: updateForm}
                ]
            })
            const vm = new Vue({
                el:"#app",
                router
            })
        </script>
    </body>
</html>